<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }

    #app {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: white;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <script type="text/javascript" src="/modules/jupyter-widget/dist/index.js"></script>
  <script type="text/javascript">
    let deck;
    const customLibraries = [{libraryName: 'CustomLayerLibrary',  resourceUri: '/test/render/jupyter-widget-custom-layer-bundle.js'}];

    window.onmessage = evt => {
      if (!deck) {
        deck = createDeck({
          mapboxApiKey: 'NO_API_KEY',
          container: document.getElementById('app'),
          jsonInput: evt.data.json,
          useTooltip: true,
          customLibraries
	});

        deck.setProps({
          onAfterRender: () => window.top.postMessage('done')
        });

      } else {
        updateDeck(evt.data.json, deck);
      }
    }
  </script>
</body>

</html>
